<template>
	<view style="width:100%;">
		<cover-view class="swiper-tab flex">
			<cover-view class="swiper-tab-list" :class="currentTab == 0 ? 'on' : ''" :data-current="0" @tap="swichNav">统计结果</cover-view>
			<cover-view class="swiper-tab-list" :class="currentTab == 1 ? 'on' : ''" :data-current="1" @tap="swichNav">详细数据</cover-view>
			<cover-image class="image" :src="imgurl+'gengduo.png'" @click="showPopup"></cover-image>
		</cover-view>
		<!-- <swiper @change='changeTab' :current="currentTab" style="height: calc(100vh - 40px)"> -->
		<!-- <swiper @change='changeTab' :current="currentTab" style="height: 180vh">
			<swiper-item> -->
				<view class="main" id="imgBox" v-if="currentTab == 0">
					<view class="mian-item" v-for="(item, index) in list" :key="index">
						<view v-if="item.pid!=3">
							<view class="item-top">
								<view class="top-titles flex">
									<text>第{{index+1}}题:{{item.ti}}</text>
									<span>{{item.pid==1?'[单选题]':''}}</span>
									<span>{{item.pid==2?'[多选题]':''}}</span>
								</view>
								<view class="top-mian">
									<view class="top-title flex">
										<view class="left">选项</view>
										<view class="center">小计</view>
										<view class="right">比例</view>
									</view>
									<view class="top-content" v-for="(el, idx) in item.di" :key="idx">
										<view class="content-item flex">
											<view class="left">{{el.wen}}</view>
											<view class="center">{{el.ran}}</view>
											<view class="right">{{((el.zang)*100).toFixed(2)}}%</view>
										</view>
									</view>
								</view>
								<view class="top-bottom flex">
									本题有效填写人数:{{item.zongren}}
								</view>
							</view>
							<view class="item-bottom">
								<view class="item-bottom-title flex">
									<view class="pie flex" @tap="Pie(item, index)" :class="[item.pieShow == false? '' : 'pieother']">
										<image :src="item.pieShow==false?imgurl+'pie.png':imgurl+'pieother.png'"></image>
										<text>饼图</text>
									</view>
									<view class="pie flex" @tap="Zhu(item, index)" :class="[item.zhuShow==false? '' : 'pieother']">
										<image :src="item.zhuShow==false?imgurl+'zhu.png':imgurl+'zhuother.png'"></image>
										<text>柱状图</text>
									</view>
									<!-- <view class="pie flex" @tap="disZero(item, index)" :class="[oZero == false? '' : 'pieother']"> -->
									<view class="pie flex" @tap="disZero(item, index)" :class="[item.zeroShow == false? '' : 'pieother']">
										<image :src="item.zeroShow ? imgurl + 'hideother.png' : imgurl +'hide.png'"></image>
										<text>隐藏零</text>
									</view>
								</view>
								<view v-if="item.pieShow" class="pic-mian">
									<mpvue-echarts ref="pieChart{{index}}" :echarts="echarts" @onInit="pieChart(item, index)" />
								</view>
								<view v-if="item.zhuShow" class="pic-mian">
									<mpvue-echarts ref="zhuChart{{index}}" :echarts="echarts" @onInit="zhuChart(item, index)" />
								</view>
								<view class="item-bottom-footer flex">
									<view class="footer-left" @tap="Percent(item, index)">{{item.percent}}</view>
									<view class="footer-left" @tap="countSort(item, index)">小计排序</view>
								</view>
							</view>
						</view>
						<view v-if="item.pid==3">
							<view class="item-top">
								<view class="top-titles flex">
									<text>第{{index+1}}题:{{item.ti}}[填空题]</text>
								</view>
								<view class="top-mian">
									<view class="top-title flex">
										<view class="left other-left">序号</view>
										<view class="right other-right">答案文本</view>
									</view>
									<view class="top-content" v-for="(el,index) in item.wen" :key="index">
										<view class="content-item flex">
											<view class="left other-left">{{index+1}}</view>
											<view class="right other-right">{{el.wen}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
		<!-- 	</swiper-item>
			<swiper-item style="background:#F0F0F0;"> -->
				<view class="main" v-if="currentTab == 1">
					<view class="other-main">
						<uni-collapse accordion="true">
							<block v-for="(item, index) in listDetail" :key="index">
								<uni-collapse-item :title="'No.' + (index+1)">
									<view class="item-box" style="padding: 0 15rpx; box-sizing: border-box;">
										<view class="messages">
											<!-- <view class="messages-item flex">
						        			<span>序号:</span>
						        			<text>{{index+1}}</text>
						        		</view> -->
											<view class="messages-item flex">
												<span>答卷人:</span>
												<text>{{item.data[0].name}}</text>
											</view>
											<view class="messages-item flex">
												<span>填写时间:</span>
												<text>{{item.tijiao.date}}</text>
											</view>
											<view class="messages-item flex">
												<span>来源城市:</span>
												<text>{{}}</text>
											</view>
											<view class="messages-item flex">
												<span>来源ip:</span>
												<text>{{}}</text>
											</view>
											<view class="messages-item flex">
												<span>来源渠道:</span>
												<text>{{}}</text>
											</view>
										</view>
										<view class="timu">
											<view class="timu-item" v-for="(el,indexs) in item.data" :key='indexs'>
												<view class="timu-title flex">
													<text>{{el.ti}}</text>
													<span v-if="el.pid==1">[单选题]</span>
													<span v-if="el.pid==2">[多选题]</span>
												</view>
												<text style="color: #1F9FFB;">回答：</text>
												<block v-if="el.pid != 3">
													<view class="timu-content" v-for="(items,ids) in el.di" :key="ids">
														<text v-if="items.zang != null &&  items.zang > 0">{{items.wen}}</text>
													</view>
												</block>
												<block v-else>
													<view class="timu-content">
														<text>{{el.wen[index].wen ? el.wen[index].wen : ''}}</text>
													</view>
												</block>
											</view>
										</view>
										<view class="other-footer flex">
											<view class="other-footer-center row" @tap="Del(item.tijiao)">
												<image :src="imgurl+'shanchu.png'"></image>
												<text>删除问卷</text>
											</view>
											<!-- <view class="other-footer-right row" @tap="Shouqi(index, item)">
						        			<image :src="imgurl+'zhankai.png'"></image>
						        			<text>收起</text>
						        		</view> -->
										</view>
									</view>
								</uni-collapse-item>
							</block>
						</uni-collapse>
					</view>
				</view>
			<!-- </swiper-item> -->
		</swiper>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js"
	import app from "../../../App.vue"
	import * as echarts from '../../../components/ec-canvas/echarts.js'
	import mpvueEcharts from '../../../components/mpvue-echarts/src/echarts.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'

	export default {
		components: {
			uniPopup,
			mpvueEcharts,
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				imgurl: "",
				wenid: '',
				currentTab: 0,
				height: "",
				width: "",
				heights: "",
				widths: "",
				percent: '数值',
				showpercent: true, //显示百分比或数值
				// pieShow: true,
				// zhuShow: false,
				oZero: false,  //默认不选择隐藏零
				sort: false,
				// showlist: false, //展示列表
				echarts,
				showpopup: true,
				list: [],
				listDetail: [],
				pielist: [{
						value: 335,
						name: '选项一'
					},
					{
						value: 310,
						name: '选项二'
					}
				],
				ydata: [],
				xdata: [],
				delWenid: '',
				delNameid: ''
			};
		},
		methods: {
			//点击tab切换
			swichNav(e) {
				if (this.currentTab === e.target.dataset.current) {
					return false;
				} else {
					this.currentTab = e.target.dataset.current
				}
			},
			changeTab(e) {
				// console.log(e.detail.current)
				this.currentTab = e.detail.current
				console.log(this.currentTab)
			},
			showPopup() {
				uni.showActionSheet({
					itemList: this.currentTab == 0 ? ['下载统计结果'] : ['下载详细数据'],
					success: (res) => {
						if (res.tapIndex == 0) {
							if (uni.getStorageSync('message') && uni.getStorageSync('message')[0].call) {
								this.currentTab == 0 ? this.capture() : this.loadDetail()
							} else {
								uni.showModal({
									title: '该账户没有绑定手机号',
									content: '重新登录，并绑定手机号？',
									confirmColor: '#209FFC',
									confirmText: '确定',
									cancelText: '取消',
									success: (res) => {
										if (res.confirm) {
											setTimeout(() => {
												uni.navigateTo({
													url: '../../loginIndex/loginIndex'
												})
											}, 500)
										} else if (res.cancel) {}
									}
								})
							}
						}
					},
					fail: (err) => {
						console.log(err.errMsg);
					}
				})
			},
			//点击展示饼图
			Pie(item, index) {
				let idx = index
				if(!this.list[idx]['pieShow']){
					this.$set(this.list[idx], 'zhuShow', false)
					this.$set(this.list[idx], 'pieShow', true)
					this.$forceUpdate()
					this.oZero = false
					let keyPie = 'pieChart' + idx
					if (this.$refs[keyPie]) {
						this.$refs[keyPie][0].init()
					}
				}
			},
			//点击展示柱状图
			Zhu(item, index) {
				let idx = index
				if(!this.list[idx]['zhuShow']){
					this.$set(this.list[idx], 'zhuShow', true)
					this.$set(this.list[idx], 'pieShow', false)
					this.$forceUpdate()
					this.oZero = false
					let keyZhu = 'zhuChart' + idx
					if (this.$refs[keyZhu]) {
						this.$refs[keyZhu][0].init()
					}
				}
			},
			// 隐藏零
			disZero(item, idx) {
				console.log(item, idx)
				let pieShowStatus = item.pieShow;
				let zhuShowStatus = item.zhuShow;
				// this.oZero === false ? this.oZero = true : this.oZero = false,
				item.zeroShow === true ? this.list[idx]['zeroShow'] = false : this.list[idx]['zeroShow'] = true
				let keyPie = 'pieChart' + idx
				let keyZhu = 'zhuChart' + idx
				let data = {}
				if (this.zeroShow) {
					data = {
						api: 'wentong',
						wenid: this.wenid,
						pid: 1
					}
				} else {
					data = {
						api: 'wentong',
						wenid: this.wenid
					}
				}
				api.look(data).then(res => {
					// this.list = res
					this.list.forEach((item,index) => {
						if(idx == index){
							item.di = res[index]['di'];
							item.pid = res[index]['pid'];
							item.ti = res[index]['ti'];
							item.zongren = res[index]['zongren'];
						}
					})
					if (this.$refs[keyZhu]) {
						this.$refs[keyZhu][0].init()
					}
					if (this.$refs[keyPie]) {
						this.$refs[keyPie][0].init()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 小计排序
			countSort(itemInfo, idx) {
				console.log('aaaaa', itemInfo, idx)
				this.sort === false ? this.sort = true : this.sort = false
				let keyPie = 'pieChart' + idx
				let keyZhu = 'zhuChart' + idx
				let data = {}
				if (this.sort) {
					data = {
						api: 'wentong',
						wenid: this.wenid,
						pai: 1
					}
				} else {
					data = {
						api: 'wentong',
						wenid: this.wenid
					}
				}
				api.look(data).then(res => {
					this.list.forEach((item,index) => {
						if(idx == index){
							item.di = res[index]['di'];
							item.pid = res[index]['pid'];
							item.ti = res[index]['ti'];
							item.zongren = res[index]['zongren'];
						}
					})
					if (this.$refs[keyZhu]) {
						this.$refs[keyZhu][0].init()
					}
					if (this.$refs[keyPie]) {
						this.$refs[keyPie][0].init()
					}
					this.$forceUpdate()
				}).catch(err => {
					console.log(err)
				})
			},
			//切换百分比或数值
			Percent(item, idx) {
				let _this = this
				console.log(_this.list[idx])
				let keyPie = 'pieChart' + idx;
				let keyZhu = 'zhuChart' + idx;
				item.showpercent == true ? (_this.list[idx]['showpercent']) = false : (_this.list[idx]['showpercent']) = true
				item.percent == '数值' ? (_this.list[idx]['percent']) = '百分比' : (_this.list[idx]['percent']) = '数值'
				if (this.$refs[keyPie]) {
					this.$refs[keyPie][0].init()
				}
				if (this.$refs[keyZhu]) {
					this.$refs[keyZhu][0].init()
				}
				this.$forceUpdate()
			},
			//展开详细数据
			Show(index, item, el) {
				this.delWenid = item.wenid
				this.delNameid = item.nameid
				// this.showlist === false ? this.showlist = true : this.showlist = false,
				el.showlist === true ? this.$set(el, 'showlist', false) : this.$set(el, 'showlist', true)
				console.log(index, el)
			},
			//收起详细数据
			Shouqi(index, item) {
				this.$set(item, 'showlist', false)
				console.log(index, item)
			},
			//删除无效问卷
			Del(item) {
				uni.showModal({
					title: '系统提示',
					content: '您确定这是无效问卷、需要删除吗?注意删除后不列入统计，无法恢复！',
					confirmText: '删除',
					confirmColor: '#209FFC',
					success: function(res) {
						if (res.confirm) {
							api.look({
								api: 'qingkong',
								wenid: item.wenid,
								nameid: item.nameid
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '清除成功',
										icon: 'success',
										duration: 2000
									})
								}
							}).catch(err => {
								console.log(err)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//分享统计结果
			shareCensus() {
				uni.navigateTo({
					url: "../shareCensus/shareCensus"
				})
			},
			/* //下载统计结果
			uploadCensus() {
				uni.navigateTo({
					url: '../uploadCensus/uploadCensus'
				})
			}, */
			//自定义筛选
			Choose() {
				uni.navigateTo({
					url: '../Choose/Choose'
				})
			},
			/* //分享详细数据
			shareDetailCensus() {
				uni.navigateTo({
					url: '../shareDetailCensus/shareDetailCensus'
				})
			}, */
			/* //下载详细结果
			uploadDetailCensus() {
				uni.navigateTo({
					url: '../unloadDetailCensus/unloadDetailCensus'
				})
			}, */
			//清除数据
			clearData() {
				if (this.delWenid != '') {
					api.look({
						api: 'qingkong',
						wenid: this.delWenid,
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '清除成功',
								icon: 'success',
								duration: 2000
							})
						}
					}).catch(err => {
						console.log(err)
					})
				} else {
					uni.showToast({
						title: '请先选择要清除的条目',
						icon: 'none',
						duration: 2000
					})
				}
			},
			//饼图
			pieChart(itemInfo, indexInfo) {
				let {
					width,
					height
				} = itemInfo;
				var option = {
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '50%'],
						data: this.pielist,
						grid: {
							top: '50px',
							left: '0px',
							right: '0px',
							bottom: '0px',
						},
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal: {
								label: {
									show: true,
									formatter: itemInfo.showpercent == true ? '{b} : {d}%' : '{b} : {c}',
								}
							}
						}
					}]
				}
				this.list.forEach((item, index) => {
					if(indexInfo == index) {
						if (item.pid != 3) {
							item.di.map((el) => {
								el.value = el.ran
								el.name = el.wen
							})
						}
						let key = 'pieChart' + index
						let canvas = ''
						if (this.$refs[key]) {
							canvas = this.$refs[key][0].canvas
							echarts.setCanvasCreator(() => canvas);
							const chart = echarts.init(canvas, null, {
								width: this.widths,
								height: 200
							})
							option.series[0].data = item.di
							chart.setOption(option)
						}
					}
				})
			},
			//柱状图
			zhuChart(itemInfo, indexInfo) {
				let {
					width,
					height
				} = itemInfo;
				width = width - 20;
				var option = {
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						top: '50px',
						left: '0px',
						right: '0px',
						bottom: '0px',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						data: this.xdata,
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '直接访问',
						type: 'bar',
						barWidth: '60%',
						data: [],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal: {
								label: {
									show: true,
									position: 'top',
									padding: [10, -10],
									formatter: itemInfo.showpercent == true ? '{c}%' : '{c}',
								}
							}
						}
					}]
				};
				(this.list || []).forEach((item, index) => {
					if(indexInfo == index) {
						item.yL = []
						item.xL = []
						item.yrL = []
						if (item.pid != 3) {
							item.di.map((el) => {
								el.value = el.ran
								el.name = el.wen
								el.rate = (el.zang * 100).toFixed(2)
								item.yL.push(el.value)
								item.yrL.push(el.rate)
								item.xL.push(el.name)
							})
						}
						let key = 'zhuChart' + index
						let canvas = ''
						if (this.$refs[key]) {
							canvas = this.$refs[key][0].canvas
							echarts.setCanvasCreator(() => canvas);
							const chart = echarts.init(canvas, null, {
								width: this.widths,
								height: 200
							})
							canvas.setChart(chart)
							option.xAxis[0].data = item.xL
							this.showpercent == true ? option.series[0].data = item.yrL : option.series[0].data = item.yL
							chart.setOption(option)
						}
					}
				})
			},
			// 下载统计结果
			capture() {
				api.look({
					api: 'wenxiaurl',
					wenid: this.wenid
				}).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: '../uploadCensus/uploadCensus?loadUrl=' + res.date.url + '&currentTab=' + this.currentTab
						})
						/* uni.downloadFile({
							url: res.date.url,
							success: (resQ) => {
								if (resQ.statusCode === 200) {
									uni.saveFile({
										tempFilePath: resQ.tempFilePath,
										success: (resq) => {
											uni.showToast({
												title: '下载成功',
												icon: 'success',
												duration: 2000,
												success: () => {
													setTimeout(() => {
														uni.openDocument({
															filePath: resq.savedFilePath,
															success: () => {
																console.log('打开文档成功');
															},
															fail: (err) => {
																console.log(err, '打开失败')
															}
														})
													}, 2000)
												}
											})
										}
									})
								}
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '失败请重新下载',
								});
							}
						}) */
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 下载详细结果
			loadDetail() {
				api.look({
					api: 'wenxianxiang',
					wenid: this.wenid
				}).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: '../uploadCensus/uploadCensus?loadUrl=' + res.date.url + '&currentTab=' + this.currentTab
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			this.imgurl = app.globalData.imgurls
			let that = this
			this.wenid = options.wenid
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight * 0.92 + 'px'
					that.width = res.windowWidth + 'px'
					that.heights = res.windowHeight
					that.widths = res.windowWidth * 0.92
				}
			})
			api.look({
				api: 'wentong',
				wenid: options.wenid
			}).then(res => {
				that.list = res;
				(that.list || []).forEach(el => {
					el.pieShow = true
					el.zhuShow = false
					el.zeroShow = false
					el.showpercent = false
					el.percent = '数值'
				}) 
				console.log(that.list, 'TONG')
			}).catch(err => {
				console.log(err, 'ERR')
			})
			api.look({
				api: 'wenbiaotong',
				wenid: options.wenid,
				nameid: uni.getStorageSync('message')[0].id
			}).then(res => {
				this.listDetail = res
				this.listDetail.forEach(el => {
					el.showlist = false
				})
				console.log(this.listDetail, 'DDLIST')
			}).catch(err => {
				console.log(err)
			})
		}
	}
</script>

<style lang="scss">
	page {
		font-weight: 500;
	}

	.main {
		background-color: #FFFFFF;
		margin-top: 100rpx;
	}
	
	.pic-mian {
		position: static;
		z-index: 1;
	}

	.other-main {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.swiper-tab {
		background: #fff;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		justify-content: space-between;
		position: fixed;
		top: -1rpx;
		left: 0;
		right: 0;
		z-index: 99999;

		.swiper-tab-list {
			width: 45%;
			color: #333;
			font-size: 32rpx;
			text-align: center;
			line-height: 76rpx;	
		}

		.image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx;
		}
	}

	.swiper-tab .on {
		color: #1F9FFB;
		position: relative
	}

	.on:after {
		content: "";
		display: block;
		height: 8rpx;
		width: 165rpx;
		background: #1F9FFB;
		position: absolute;
		bottom: 0;
		left: 25%;
		border-radius: 16rpx
	}

	.mian-item {
		width: 690rpx;
		margin: 20rpx auto;
		font-size: 30rpx;
		color: #333;

		.item-top {
			.top-titles {
				margin: 20rpx 0;

				span {
					color: #999;
					margin-left: 10rpx;
				}
			}

			.top-bottom {
				width: 690rpx;
				margin: 0 auto;
				padding-left: 20rpx;
				box-sizing: border-box;
				height: 100rpx;
				line-height: 100rpx;
				background: #F0F0F0;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
		}

		.top-mian {
			.top-title {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				background: #F0F0F0;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;

				.left {
					width: 40%;
					text-align: center;
				}

				.other-left {
					width: 40%;
					text-align: center;
					border-right: 1rpx solid #DFDFDF
				}

				.center {
					width: 30%;
					text-align: center;
					border-left: 1rpx solid #DFDFDF;
					border-right: 1rpx solid #DFDFDF;
				}

				.right {
					width: 30%;
					text-align: center;
				}

				.other-right {
					width: 70%;
					text-align: center;
				}
			}

			.top-content {
				// border: 1rpx solid #DFDFDF;
				border-left: 1rpx solid #DFDFDF;
				border-right: 1rpx solid #DFDFDF;
				border-top: none;

				.content-item {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-bottom: 1rpx solid #DFDFDF;

					.left {
						width: 40%;
						text-align: center;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}

					.other-left {
						width: 40%;
						text-align: center;
						border-right: 1rpx solid #DFDFDF
					}

					.center {
						width: 30%;
						text-align: center;
						border-left: 1rpx solid #DFDFDF;
						border-right: 1rpx solid #DFDFDF;
					}

					.right {
						width: 30%;
						text-align: center;
					}

					.other-right {
						width: 70%;
						text-align: center;
					}
				}
			}

			.top-bottom {
				width: 690rpx;
				height: 100rpx;
				margin: 0 auto;
				line-height: 100rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				background: #F0F0F0;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
		}

		.item-bottom {
			margin-top: 20rpx;

			.item-bottom-title {
				justify-content: center;

				.pie {
					width: 135rpx;
					height: 60rpx;
					border: 1rpx solid rgba(223, 223, 223, 1);
					border-radius: 10rpx;
					color: #333;
					font-size: 24rpx;
					margin-right: 30rpx;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.pieother {
					color: #fff;
					background: #209FFC
				}
			}

			.pic-mian {
				width: 100%;
				height: 450rpx;
				text-align: center;
			}

			.item-bottom-footer {
				justify-content: center;

				.footer-left {
					border-radius: 10rpx;
					padding: 15rpx 25rpx;
					border: 1rpx solid #DFDFDF;
					margin-right: 20rpx;
				}
			}
		}
	}

	.other-items {
		background: #fff;

		.other-item {
			justify-content: space-between;
			box-sizing: border-box;
			width: 690rpx;
			height: 100rpx;
			margin: 20rpx auto;

			.other-item-left {
				.left {
					margin-right: 15rpx;
				}
			}

			.other-item-right {
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.beizhu_box {
		padding-bottom: 100rpx;
		box-sizing: border-box;

		.beizhu {
			width: 690rpx;
			color: #333;
			font-size: 30rpx;
			margin: 20rpx auto;

			.bztitle {
				margin: 20rpx 0;
			}
		}
	}



	.messages {
		background: #F0F0F0;
		height: 300rpx;
		font-size: 28rpx;

		.messages-item {
			width: 690rpx;
			margin: 0 auto;
			color: #333;
			height: 60rpx;
			line-height: 60rpx;

			span {
				margin-right: 10rpx;
			}
		}
	}

	.timu {
		.timu-item {
			width: 100%;
			margin: 15rpx auto;
			padding: 15rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #333;
			background-color: #FFFFFF;
			border-radius: 10rpx;

			.timu-title {
				margin: 20rpx 0;

				span {
					color: #999;
				}
			}

			.timu-content {
				text {
					margin: 20rpx 0;
				}
			}
		}
	}

	.other-footer {
		justify-content: center;
		padding: 15rpx 0;
		font-size: 24rpx;

		.other-footer-left {
			image {
				width: 48rpx;
				height: 43rpx;
			}

		}

		.other-footer-center {
			image {
				width: 48rpx;
				height: 43rpx;
			}

			margin:0 50rpx;
		}

		.other-footer-right {
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

	}

	.popup {
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;

		.popup-item {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #333;
			font-size: 30rpx;
			border-bottom: 1rpx solid #DFDFDF;
		}

		.popup-item-other {
			border-bottom: none;
		}
	}
</style>
